<template>
    <el-card class="!border-none" shadow="never">
        <el-page-header
            :content="route.query.id ? '编辑小票模板' : '新增小票模板'"
            @back="$router.back()"
        />
        <div class="flex w-full">
            <div>
                <div class="m-4 text-2xl">基本信息</div>
                <el-form
                    :model="formData"
                    label-width="120px"
                    class="w-[540px] mt-4"
                    :rules="formRules"
                    ref="formRef"
                >
                    <el-form-item label="模板名称" prop="template_name">
                        <el-input
                            placeholder="请输入模板名称"
                            v-model="formData.template_name"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="小票名称" prop="ticket_name">
                        <el-input
                            placeholder="请输入小票名称"
                            v-model="formData.ticket_name"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="商城名称">
                        <el-switch
                            v-model="formData.show_shop_name"
                            :active-value="1"
                            :inactive-value="0"
                        />
                        <span class="form-tips ml-4">隐藏和显示商城名称，默认显示</span>
                    </el-form-item>
                    <el-form-item label="自取门店">
                        <div>
                            <el-checkbox
                                true-label="1"
                                false-label="0"
                                v-model="formData.selffetch_shop.shop_name"
                                >自提门店</el-checkbox
                            >
                            <el-checkbox
                                true-label="1"
                                false-label="0"
                                v-model="formData.selffetch_shop.contacts"
                                >联系人</el-checkbox
                            >
                            <el-checkbox
                                true-label="1"
                                false-label="0"
                                v-model="formData.selffetch_shop.shop_address"
                                >门店地址</el-checkbox
                            >
                            <div class="form-tips">门店自取时，勾选需要显示的门店信息</div>
                        </div>
                    </el-form-item>

                    <el-form-item label="买家留言">
                        <el-switch
                            v-model="formData.show_buyer_message"
                            :active-value="1"
                            :inactive-value="0"
                        />
                        <span class="form-tips ml-4">隐藏和显示买家留言，默认显示</span>
                    </el-form-item>

                    <el-form-item label="收货信息" prop="client_secret">
                        <div>
                            <el-checkbox
                                true-label="1"
                                false-label="0"
                                v-model="formData.consignee_info.name"
                                >收货人</el-checkbox
                            >
                            <el-checkbox
                                true-label="1"
                                false-label="0"
                                v-model="formData.consignee_info.mobile"
                                >联系方式</el-checkbox
                            >
                            <el-checkbox
                                true-label="1"
                                false-label="0"
                                v-model="formData.consignee_info.address"
                                >收货地址</el-checkbox
                            >

                            <div class="form-tips">门店自取时，勾选需要显示的门店信息</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="二维码">
                        <el-switch
                            v-model="formData.show_qrcode"
                            :active-value="1"
                            :inactive-value="0"
                        />
                        <span class="form-tips ml-4">关闭和开启打印小票尾部二维码，默认显示</span>
                    </el-form-item>
                    <el-form-item label="二维码链接">
                        <el-input
                            placeholder="请输入二维码链接"
                            v-model="formData.qrcode_content"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="二维码名称">
                        <el-input
                            placeholder="请输入二维码名称"
                            v-model="formData.qrcode_name"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="底部信息" prop="bottom">
                        <el-input placeholder="请输入底部信息" v-model="formData.bottom"></el-input>
                    </el-form-item>
                </el-form>
            </div>

            <div>
                <div class="m-4 text-2xl">小票预览</div>
                <div class="template">
                    <div class="line">{{ formData.ticket_name || '小票名称' }}</div>
                    <div class="text-2xl line" v-show="formData.show_shop_name === 1">商城名称</div>
                    <div class="flex flex-col line template_order text_size">
                        <div>订单编号：MWE20012345738754657834</div>
                        <div>支付方式：微信支付</div>
                        <div>配送方式：门店自取</div>
                    </div>
                    <div class="line text_size">
                        <div class="flex justify-between">
                            <div>商品名称</div>
                            <div>数量</div>
                            <div>金额</div>
                        </div>
                        <div class="flex justify-between">
                            <div>生椰拿铁</div>
                            <div>1</div>
                            <div>￥16.00</div>
                        </div>
                        <div class="flex justify-between">
                            <div>生椰拿铁</div>
                            <div>1</div>
                            <div>￥16.00</div>
                        </div>
                        <div class="flex justify-between">
                            <div>运费</div>
                            <div>￥6.00</div>
                        </div>
                    </div>
                    <div class="line text_size">
                        <div class="flex justify-between">
                            <div>订单总价</div>
                            <div>￥38.00</div>
                        </div>
                        <div class="flex justify-between">
                            <div>实付金额</div>
                            <div>￥38.00</div>
                        </div>
                    </div>
                    <div
                        class="flex flex-col line template_order text_size"
                        v-show="handleShopInfo"
                    >
                        <div>门店信息</div>
                        <div v-show="formData.selffetch_shop.shop_name == 1">美宜佳</div>
                        <div v-show="formData.selffetch_shop.contacts == 1">联系人：李先生</div>
                        <div v-show="formData.selffetch_shop.shop_address == 1">
                            门店地址：广东省 广州市 天河区 花城大道888号
                        </div>
                    </div>
                    <div
                        class="flex flex-col line template_order text_size"
                        v-show="handleUserInfo"
                    >
                        <div>买家信息</div>
                        <div v-show="formData.consignee_info.name">收货人：陈小姐</div>
                        <div v-show="formData.consignee_info.mobile">联系方式：130****1619</div>
                        <div v-show="formData.consignee_info.address">
                            收货地址：广东省 广州市 天河区 花城大道01号
                        </div>
                    </div>
                    <div
                        class="line template_order text_size"
                        v-show="formData.show_buyer_message === 1"
                    >
                        <div>买家留言：橙子尽量挑选一些比较大的，谢谢</div>
                    </div>
                    <div class="line flex justify-center" v-show="formData.show_qrcode === 1">
                        <img src="" alt="" class="template_img" />
                    </div>
                    <div class="text_size">
                        <div class="py-[12px]">
                            {{ formData.bottom || '谢谢惠顾，欢迎下次光临' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer-btns>
            <el-button type="primary" @click="handlesave">保存</el-button>
        </footer-btns>
    </el-card>
</template>
<script lang="ts" setup>
import { addtemplate, templatedetail, templateedit } from '@/api/application'
import feedback from '@/utils/feedback'
const route = useRoute()
const router = useRouter()

const formData = reactive({
    id: '',
    template_name: '',
    ticket_name: '',
    show_shop_name: 1,
    selffetch_shop: {
        shop_name: '1',
        contacts: '1',
        shop_address: '1'
    },
    show_buyer_message: 1,
    consignee_info: {
        name: '1',
        mobile: '1',
        address: '1'
    },
    show_qrcode: 1,
    qrcode_name: '',
    qrcode_content: '',
    private_key: '',
    bottom: ''
})
const formRules = {
    template_name: [
        {
            required: true,
            message: '请输入模板名称',
            trigger: ['blur']
        }
    ],
    ticket_name: [
        {
            required: true,
            message: '请输入小票名称',
            trigger: ['blur']
        }
    ],
    bottom: [
        {
            required: true,
            message: '请输入底部信息',
            trigger: ['blur']
        }
    ]
}
const handlesave = async () => {
    if (!route.query.id) await addtemplate(formData)
    else await templateedit(formData)
    feedback.msgSuccess('操作成功')
    router.back()
}
const handleShopInfo = computed(() => {
    const arr = []
    const print = formData.selffetch_shop
    for (const key in print) {
        arr.push(print[key])
    }
    const res = arr.find((item) => item == 1)
    return res == undefined ? false : true
})
const handleUserInfo = computed(() => {
    const arr = []
    const print = formData.consignee_info
    for (const key in print) {
        arr.push(print[key])
    }
    const res = arr.find((item) => item == 1)
    return res == undefined ? false : true
})
const getData = async () => {
    if (!route.query.id) return
    const data = await templatedetail({ id: route.query.id })
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = data[key]
    })
}
getData()
</script>
<style scoped lang="scss">
.template {
    width: 358px;
    // height: 872px;
    border: 1px solid rgba(187, 187, 187, 1);
    text-align: center;
    margin-left: 250px;
    padding: 20px 0;
    .line {
        padding: 12px;
        border-bottom: 1px dashed rgba(224, 224, 224, 1);
    }
    &_order {
        text-align: left;
    }
    .text_size {
        font-size: 12px;
    }
    &_img {
        width: 108px;
        height: 108px;
    }
}
</style>
